<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery实现复选框全选和取消全选功能</title>
    <style>
        .box {
            width: 500px;
            margin: 50px auto 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="checkbox" onclick="checkAll(this)" id="checkboxAll" />全选
        <hr>
        <div>
            <input type="checkbox" class="checkbox" />互联网<br>
            <input type="checkbox" class="checkbox" />科技<br>
            <input type="checkbox" class="checkbox" />健康<br>
            <input type="checkbox" class="checkbox" />探索<br>
            <input type="checkbox" class="checkbox" />视野<br>
        </div>
    </div>

    <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
    <script>
        //全选/取消全选
        function checkAll(obj) {
            if ($(obj).prop('checked')) {
                $('.checkbox').prop('checked', true);
            } else {
                $('.checkbox').prop('checked', false);
            }
        }
        //全选按钮选中/取消
        function aaa() {
            var checkboxLen = $('.checkbox').length
            var checkedLen = $('.checkbox:checked').length
            if (checkboxLen == checkedLen) {
                $("#checkboxAll").prop('checked', true);
            } else {
                $("#checkboxAll").prop('checked', false);
            }
        }
        $(function () {
            //监听子项选中/取消
            $('.checkbox').change(function () {
                aaa()
            })
        })
    </script>
</body>

</html>